<template>
  <page-header-wrapper>
    <div class="table-page-search-wrapper">
      <a-card>
        <a-row type="flex" justify="center" align="top">
          <a-col :span="12">
            <a-form layout="horizontal">
              <a-form-item label="入场券价格"
                           :label-col="{span: 4}"
                           :wrapper-col="{ span: 14 }">
                <a-input-group size="large">
                  <a-row>
                    <a-col :span="18">
                      <a-input :disabled="!state.v1" v-model="data[0]"/>
                    </a-col>
                    <a-col :span="6">
                      <a-button block :type="!state.v1?'primary':'danger'" style="height: 40px" @click="onSubmit(0)">
                        {{!state.v1?'修改':'提交'}}
                      </a-button>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
              <a-form-item label="半场价格"
                           :label-col="{span: 4}"
                           :wrapper-col="{ span: 14 }">
                <a-input-group size="large">
                  <a-row>
                    <a-col :span="18">
                      <a-input :disabled="!state.v2" v-model="data[1]"/>
                    </a-col>
                    <a-col :span="6">
                      <a-button block :type="!state.v2?'primary':'danger'" style="height: 40px" @click="onSubmit(1)">
                        {{!state.v2?'修改':'提交'}}
                      </a-button>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
              <a-form-item label="全场价格"
                           :label-col="{span: 4}"
                           :wrapper-col="{ span: 14 }">
                <a-input-group size="large">
                  <a-row>
                    <a-col :span="18">
                      <a-input :disabled="!state.v3" v-model="data[2]"/>
                    </a-col>
                    <a-col :span="6">
                      <a-button block :type="!state.v3?'primary':'danger'" style="height: 40px" @click="onSubmit(2)">
                        {{!state.v3?'修改':'提交'}}
                      </a-button>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
            </a-form>
          </a-col>
<!--          <a-col :span="12">-->

<!--          </a-col>-->
        </a-row>

      </a-card>
    </div>
  </page-header-wrapper>

</template>

<script>
    import {getCourtPrice,changeCourtPrice} from "../../api/order";

    export default {
        name: "CourtController",
        data() {
            return {
                state: {
                    v1:true,
                    v2:true,
                    v3:true
                },
                data: [
                    '',
                    '',
                    '',
                ]
            }
        },
        mounted(){
          this.init();
        },
        methods: {
            init(){
                this.getData()
            },
            getData(){
                let _this=this;
                getCourtPrice().then((res)=>{
                    _this.state.v1=true
                    _this.state.v2=true
                    _this.state.v3=true
                    _this.data[0]=res.data[0].price
                    _this.data[1]=res.data[1].price
                    _this.data[2]=res.data[2].price
                    _this.state.v1=false
                    _this.state.v2=false
                    _this.state.v3=false
                });
            },
            onSubmit(e) {
                let _this = this;
                if(e==0){
                    if(_this.state.v1){
                        if(_this.data[0]!=='')
                        changeCourtPrice({
                            id:1,
                            price:_this.data[0]
                        }).then((res)=>{
                            if (res.status === 200) {
                                _this.$notification.success({
                                    message: "修改成功"
                                })
                            }else {
                                _this.$notification.warning({
                                    message: res.message
                                })
                            }
                            _this.getData();
                            _this.state.v1=!_this.state.v1
                        }).catch(res=>{
                            _this.$notification.warning({
                                message: res.message
                            })
                        })
                    }else{
                        _this.state.v1=!_this.state.v1
                    }

                }else if(e==1){
                    if(_this.state.v2){
                        if(_this.data[1]!=='') {
                            changeCourtPrice({
                                id:2,
                                price:_this.data[1]
                            }).then((res)=>{
                                if (res.status === 200) {
                                    _this.$notification.success({
                                        message: "修改成功"
                                    })
                                }else {
                                    _this.$notification.warning({
                                        message: res.message
                                    })
                                }
                                _this.getData();
                                _this.state.v2=!_this.state.v2
                            }).catch(res=>{
                                _this.$notification.warning({
                                    message: res.message
                                })
                            })
                        }else{
                            _this.state.v2=!_this.state.v2
                        }
                    }else{
                        _this.state.v2=!_this.state.v2
                    }
                }else{
                    if(_this.state.v3){
                        if(_this.data[2]!==''){
                            changeCourtPrice({
                                id:3,
                                price:_this.data[2]
                            }).then((res)=>{
                                if (res.status === 200) {
                                    _this.$notification.success({
                                        message: "修改成功"
                                    })
                                }else {
                                    _this.$notification.warning({
                                        message: res.message
                                    })
                                }
                                _this.getData();
                                _this.state.v3=!_this.state.v3
                            }).catch(res=>{
                                _this.$notification.warning({
                                    message: res.message
                                })
                            })
                        }else{
                            _this.state.v3=!_this.state.v3
                        }
                    }else{
                        _this.state.v3=!_this.state.v3
                    }


                }
            }
        }
    }
</script>

<style scoped>

</style>